
[license-img]: https://img.shields.io/github/license/HuolalaTech/page-spy-web?label=License
[license-url]: https://github.com/HuolalaTech/page-spy-web/blob/main/LICENSE
[release-img]: https://img.shields.io/github/package-json/v/HuolalaTech/page-spy-web/release?label=Release
[release-url]: https://github.com/HuolalaTech/page-spy-web/blob/release/package.json
[browser-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-browser?label=Browser&color=orange
[browser-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-browser
[uniapp-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-uniapp?label=UniApp&color=green
[uniapp-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-uniapp
[wechat-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-wechat?label=Wechat&color=green
[wechat-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-wechat
[alipay-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-alipay?label=Alipay&color=blue
[alipay-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-alipay
[taro-ver-img]: https://img.shields.io/npm/v/@huolala-tech/page-spy-taro?label=Taro&color=blue
[taro-ver-url]: https://npmjs.com/package/@huolala-tech/page-spy-taro
[harmony-ver-img]: https://harmony.blucas.me/badge/version/@huolala/page-spy-harmony?label=Harmony&color=black
[harmony-ver-url]: https://ohpm.openharmony.cn/#/cn/detail/@huolala%2Fpage-spy-harmony
[api-ver-img]: https://img.shields.io/github/v/tag/HuolalaTech/page-spy-api?label=API
[api-ver-url]: https://github.com/HuolalaTech/page-spy-api/tags
[node-deploy]: https://img.shields.io/badge/Node_Deploy-Install-CB3937
[node-deploy-url]: https://pagespy.org/#/docs/deploy-with-node
[docker-deploy]: https://img.shields.io/badge/Docker_Deploy-Install-1E63ED
[docker-deploy-url]: https://pagespy.org/#/docs/deploy-with-docker
[bt-deploy]: https://img.shields.io/badge/BT_Deploy-Install-20a53a
[bt-deploy-url]: https://pagespy.org/#/docs/deploy-with-baota


import React from 'react';
import { Flex } from 'antd';
import bannerImg from '@/assets/image/doc-banner.png';

import logo from '@/assets/image/logo.svg';
import consoleImg from '@/assets/image/screenshot/console-panel.png';
import networkImg from '@/assets/image/screenshot/network-panel.png';
import pageImg from '@/assets/image/screenshot/page-panel.png';
import storageImg from '@/assets/image/screenshot/storage-panel.png';
import systemImg from '@/assets/image/screenshot/system-panel.png';
import whyIsPageSpyImg from '@/assets/image/screenshot/why-is-pagespy-en.png';
import offlineImg from '@/assets/image/screenshot/offline-panel.png';

export const githubUrl = import.meta.env.VITE_GITHUB_REPO;


<div align="center">
  <img src={logo} height="100" />
  <h1>Page Spy</h1>
  <h5>A remote debugging platform you can definitely use.</h5>
</div>

<div className='badges'>
  [![Release][release-img]][release-url]
  [![license][license-img]][license-url]
</div>

<div className="badges">
  [![Browser SDK version][browser-ver-img]][browser-ver-url]
  [![Wechat SDK version][wechat-ver-img]][wechat-ver-url]
  [![Alipay SDK version][alipay-ver-img]][alipay-ver-url]
  [![UniApp SDK version][uniapp-ver-img]][uniapp-ver-url]
  [![Taro SDK version][taro-ver-img]][taro-ver-url]
  [![Harmony SDK version][harmony-ver-img]][harmony-ver-url]
  [![API Version][api-ver-img]][api-ver-url] <br />
</div>

<div className="badges">
  [![Deploy with Node][node-deploy]][node-deploy-url]
  [![Deploy with Docker][docker-deploy]][docker-deploy-url]
  [![Deploy with Baota][bt-deploy]][bt-deploy-url]
</div>

## What is PageSpy?#what-is-page-spy

**PageSpy** is an open-source remote debugging tool compatible with multiple platforms including [Web](./browser), [Mini Program](./miniprogram), [React Native](./react-native), and [Harmony OS Apps](./harmony).

It encapsulates native APIs, filtering and transforming the parameters when native methods are invoked, and organizes them into a standard format for transmission to the debugging client. The debugging client then presents the data intuitively through an interface similar to the local console.

## Why is PageSpy?#why-is-page-spy

> A picture is worth a thousand words。

<a href={whyIsPageSpyImg} target="_blank">
  <img src={whyIsPageSpyImg} />
</a>

## When to Use?#when-to-use

_PageSpy shines in any scenario where local console debugging is not possible!_ Let's explore some use cases:

- **Local Debugging of H5 and Webview Applications**: Mobile screens are too small, traditional debugging panels are inconvenient to operate, display poorly, and prone to information truncation.

- **Remote Work and Cross-Region Collaboration**: Traditional communication methods (email, phone, video conferencing) are inefficient, fault information is incomplete, and misunderstandings and misjudgments easily occur.

- **Troubleshooting White Screen Issues on User Terminals**: Data monitoring, log analysis and other traditional methods rely on the troubleshooting team's deep understanding of business and technology, resulting in low localization efficiency.

Yep, the goal of PageSpy is can help the people which in like above cases.

## Feature Overview#page-overview

Based on providing debugging functionality, PageSpy extends into two scenarios: **Online Real-time Debugging** and **Offline Log Replay**!

### 1. Online Real-time Debugging#online-debugging

- **Console Panel**: Displays logs from `console.<log | info | warn | error | debug>`, and allows sending code to be executed on the client side.

<a href={consoleImg} target="_blank">
  <img src={consoleImg} />
</a>

- **Network Panel**: Shows information about network requests made by the client.

<a href={networkImg} target="_blank">
  <img src={networkImg} />
</a>

- **Element Panel**: Displays the current client interface and allows viewing the HTML node tree.

<a href={pageImg} target="_blank">
  <img src={pageImg} />
</a>

- **Storage Panel**: Allows viewing local cache data of the client.

<a href={storageImg} target="_blank">
  <img src={storageImg} />
</a>

- **System Panel**: Displays the client's system information and checks for compatibility.

<a href={systemImg} target="_blank">
  <img src={systemImg} />
</a>

Additionally, you will receive real-time notifications when new data is available or existing data changes.

### 2. Offline Log Replay#offline-debugging

<a href={offlineImg} target="_blank">
  <img src={offlineImg} />
</a>

Highly flexible, the replay progress is under your control. As the replayer plays, you can view the client's operation trajectory and the corresponding data.
